<template>
  <div class="box">
    <div class="container">
      <div class="header">
        <span @click="changeLogin" :class="{active: isActive===0}">密码登录</span>
        <span @click="changeRegister" :class="{active: isActive===1}">免密登录</span>
      </div>
      <component v-bind:is="currentTabComponent"></component>
    </div>

  </div>
</template>

<script>
  import login from "./login.vue"
  import register from "./register"
  export default  {
    components: {
      login,
      register
    },
    data: function(){
      return {
        currentTabComponent: 'login',
        isActive: 0
      }
    },
    methods: {
      changeLogin(){
        this.currentTabComponent = 'login';
        this.isActive = 0;
      },
      changeRegister(){
        this.currentTabComponent = 'register';
        this.isActive = 1;
      }
    }
  }
</script>

<style lang="scss">
  .box{
    width:100%;
    height: 100%;
    background-image: url("../../assets/logo.jpg");
    background-size:cover;
    background-repeat: no-repeat;
  }
  .container{
    width:500px;
    height:600px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    background-color: rgba(45, 58, 75,0.5);
    opacity: 0.7;
    .header{
      width:100%;
      padding:20px;
      span{
        margin-right:20px;
        display: inline-block;
        font-size:19px !important;
        line-height: 40px;
        /*font-weight: 900;*/
      }
    }
  }
</style>
<style>
  .active{
    border-bottom:3px solid red;
  }
</style>



